<script setup lang="ts">

import { onMounted, ref,toRefs } from 'vue'
import { useRouter } from 'vue-router';
import { useShoppingStore } from '../../stores/shopping'
const {shoppingCartList} = toRefs(useShoppingStore())
const router = useRouter()
const iconList = [
    {
        text: '待付款',
        id: 0,
        iconName: 'cash-on-deliver'
    },
    {
        text: '待发货',
        id: 1,
        iconName: 'logistics'
    },
    {
        text: '待收货',
        id: 2,
        iconName: 'newspaper-o'
    },
    {
        text: '评价',
        id: 3,
        iconName: 'chat-o'
    },
    {
        text: '退款售后',
        id: 4,
        iconName: 'cash-back-record'
    }
]

const setUpList = [
    {
        text: '签到',
        id: 0,
        iconName: 'calendar-o'
    },
    {
        text: '大姨妈',
        id: 1,
        iconName: 'fire-o'
    },
    {
        text: '客服',
        id: 2,
        iconName: 'service-o'
    },
    {
        text: '达人中心',
        id: 3,
        iconName: 'bookmark-o'
    },
]

const userName = ref()
onMounted(() => {
    userName.value = sessionStorage.token
})

const goToShoppingCart = ()=>{
    router.push('/shoppingcart')
}

</script>

<template>
    <div class="my-view">
        <!-- 头像 -->
        <div class="top-item ">

            <div class="profile-box flex flex-col items-center">
                <div class="img-div ">
                    <img class=" w-16 h-16 relative -top-5 rounded-full border border-gray-300"
                        src="../../assets/orderImg/touxaing.jpg" alt="">
                </div>

                <p class="font-bold text-base">{{ userName }}</p>

            </div>



        </div>
        <!-- 主页消息收藏关注 -->
        <div class="box-bd px-3">

            <ul class="flex text-gray-400 bg-white text-sm justify-around items-center">
                <li class="flex flex-col items-center p-2">
                    <van-icon name="wap-home" color="#fd8f81" size="25" />
                    <span class="">我的主页</span>
                </li>
                <li class="flex flex-col items-center p-2">
                    <van-icon name="chat" color="#89ccf9" size="25" />
                    <span>消息</span>
                </li>
                <li class="flex flex-col items-center p-2" @click=" router.push('/collection')">
                    <van-icon name="star" color="#f9b95c" size="25" />
                    <span>收藏</span>
                </li>
                <li class="flex flex-col items-center p-2">
                    <van-icon name="friends" color="#fd8a9b" size="25" />
                    <span>关注</span>
                </li>
            </ul>

        </div>
        <!-- 购物车和红包卡券等 -->
        <div class="card-package flex justify-between px-3 mt-2 text-sm">

            <div @click="goToShoppingCart" class="left-card w-1/2 bg-white px-2 pt-2">
                <span>购物车</span>
                <p class=" text-xs text-gray-400">{{shoppingCartList.length}}件商品<van-icon name="arrow" /></p>
                <div class=" flex justify-end">
                    <img class=" w-16 h-16" src="../../assets/orderImg/gouwuche.jpg" alt="">
                </div>
            </div>

            <div class="right-card ml-2 w-1/2 flex flex-col bg-white">

                <div class=" w-full flex justify-between p-2">
                    <span>卡券红包</span>
                    <span class=" text-xs text-gray-400">1张店铺券<van-icon name="arrow" /></span>
                </div>
                <div class=" w-full flex justify-between p-2">
                    <span>补贴保障</span>
                    <span class=" text-xs text-gray-400">退货补运费<van-icon name="arrow" /></span>
                </div>
                <div class=" w-full flex justify-between p-2">
                    <span>我的钱包</span>
                    <span class=" text-xs text-gray-400">白付美在这<van-icon name="arrow" /></span>
                </div>

            </div>

        </div>

        <!-- 订单 -->
        <div class="my-order px-3 my-3">

            <div class="top-title p-2 flex justify-between items-center border-b border-gray-200 bg-white">
                <span>我的订单</span>
                <span @click="router.push({name:'orderlist',params:{id:0}})" class=" text-xs text-gray-400">全部<van-icon name="arrow" /></span>

            </div>

            <div class="icon-list">
                <van-grid :column-num="5">
                    <van-grid-item @click="router.push({name:'orderlist',params:{id:t.id+1}})" v-for="t in iconList" :key="t.id" :icon="t.iconName" :text="t.text" />

                </van-grid>
            </div>

        </div>

        <!-- 设置 -->
        <div class="my-setup px-3 my-3">
            <div class="top-title p-2  border-b border-gray-200 bg-white">
                <span>我的设置</span>


            </div>

            <div class="setup-list">
                <van-grid :column-num="4">
                    <van-grid-item v-for="t in setUpList" :key="t.id" :icon="t.iconName" :text="t.text" />
                </van-grid>
            </div>
        </div>
 
        <div class="log-out bg-red-500 mx-3 text-center text-white py-2">
            退出登录
        </div>


    </div>
</template>


<style lang="scss" scoped>
.my-view {
    width: 100vw;
    height: 92vh;
    position: fixed;
    left: 0;
    top: 0;
    background-color: #f6f6f6;
    overflow-y: auto;
    z-index: 10;
    padding-bottom: 55px;

    .top-item {

        background: url('https://s10.mogucdn.com/mlcdn/c45406/190819_1j85g48lc84kk8deg00f66fk53dlc_750x229.png') 0 -0.44rem no-repeat;
        background-size: 23.5rem 5.29rem;
        overflow: hidden;
        margin-bottom: 0.18rem;
        padding: 15px;

        .profile-box {
            margin: 0.9rem auto 0;
            height: 120px;
            width: 100%;
            border-radius: 0.12rem;
            background: #fff;
            position: relative;
        }
    }
}
</style>